<style>
    :root {
        --primary-color: #bb86fc;
        --secondary-color: #03dac6;
        --background-color: #121212;
        --surface-color: #1e1e1e;
        --on-surface-color: #e0e0e0;
        --shadow-color: rgba(0, 0, 0, 0.2);
    }

    body {
        width: 900px;
        font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        background-color: var(--background-color);
        color: var(--on-surface-color);
        -webkit-font-smoothing: antialiased;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: 0 4px 20px var(--shadow-color);
        padding: 30px;
        background-color: var(--surface-color);
    }

    h1 {
        text-align: center;
        margin-bottom: 30px;
        color: var(--primary-color);
        font-size: 2.5em;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .menu-sections {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .section {
        background-color: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        padding: 20px;
    }

    .section-title {
        color: var(--primary-color);
        font-size: 1.3em;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-list {
        display: grid;
        gap: 12px;
    }

    .menu-item {
        padding: 20px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: var(--primary-color);
    }

    .command {
        font-weight: bold;
        color: var(--secondary-color);
        font-size: 1.1em;
    }

    .description {
        margin-top: 8px;
        opacity: 0.8;
    }

    .footer {
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--secondary-color);
    }
</style>

<body>
    <div class="container">
        <h1>王者荣耀菜单帮助</h1>

        <div class="menu-sections">
            <div class="section">
                <div class="section-title">账号管理</div>
                <ul class="menu-list">
                    <li class="menu-item">
                        <div class="command">#绑定营地</div>
                        <div class="description">绑定营地ID，【#绑定营地+空格+营地ID】，可绑定多个</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#切换营地</div>
                        <div class="description">切换使用的营地ID，【#切换营地+空格+序号】</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#删除营地</div>
                        <div class="description">删除绑定的营地ID，【#删除营地+空格+序号】</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#我的ID</div>
                        <div class="description">查看已绑定的营地ID列表，✅表示当前使用的ID</div>
                    </li>
                </ul>
            </div>

            <!-- 数据查询 -->
            <div class="section">
                <div class="section-title">数据查询</div>
                <ul class="menu-list">
                    <li class="menu-item">
                        <div class="command">#王者主页</div>
                        <div class="description">查看游戏信息概览，段位，总场次，MVP次数等</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#查询战绩</div>
                        <div class="description">查询最近的30条战绩，附带数字可查看指定场次详细数据</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#查战力 [英雄名]</div>
                        <div class="description">查询指定英雄的战力排名及所需战力</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#查皮肤 [英雄名]</div>
                        <div class="description">查询指定英雄的皮肤</div>
                    </li>
                </ul>
            </div>

            <!-- 系统设置 -->
            <div class="section">
                <div class="section-title">系统设置</div>
                <ul class="menu-list">
                    <li class="menu-item">
                        <div class="command">#王者帮助</div>
                        <div class="description">显示本帮助页面</div>
                    </li>
                    <li class="menu-item">
                        <div class="command">#王者更新 / #农药更新</div>
                        <div class="description">更新本插件</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer">
            Yunzai-Bot | GloryOfKings-Plugin
        </div>
    </div>

    <script>
        const styles = [
            {
                name: "暗夜紫",
                bodyBg: "#121212",
                containerBg: "#1e1e1e",
                headerColor: "#bb86fc",
                textColor: "#e0e0e0",
                commandColor: "#03dac6",
                itemBg: "rgba(255, 255, 255, 0.05)",
                itemHoverBg: "rgba(255, 255, 255, 0.1)"
            },
            {
                name: "极光蓝",
                bodyBg: "#001529",
                containerBg: "#002140",
                headerColor: "#1890ff",
                textColor: "#ffffff",
                commandColor: "#69c0ff",
                itemBg: "#003a8c",
                itemHoverBg: "#002766"
            }
        ];

        function applyRandomStyle() {
            const style = styles[Math.floor(Math.random() * styles.length)];
            document.documentElement.style.setProperty('--background-color', style.bodyBg);
            document.documentElement.style.setProperty('--surface-color', style.containerBg);
            document.documentElement.style.setProperty('--primary-color', style.headerColor);
            document.documentElement.style.setProperty('--on-surface-color', style.textColor);
            document.documentElement.style.setProperty('--secondary-color', style.commandColor);

            // 获取所有菜单项
            const menuItems = Array.from(document.querySelectorAll('.menu-item'));

            // 随机选择2-4个菜单项
            const numberOfHighlights = Math.floor(Math.random() * 3) + 2; // 2到4之间的随机数
            const selectedItems = [];

            while (selectedItems.length < numberOfHighlights) {
                const randomIndex = Math.floor(Math.random() * menuItems.length);
                const randomItem = menuItems[randomIndex];
                if (!selectedItems.includes(randomItem)) {
                    selectedItems.push(randomItem);
                }
            }

            // 为所有菜单项添加基本样式和悬停效果
            menuItems.forEach(el => {
                el.style.backgroundColor = style.itemBg;
                el.addEventListener('mouseover', () => el.style.backgroundColor = style.itemHoverBg);
                el.addEventListener('mouseout', () => {
                    // 如果不是被选中的项目，则恢复原始背景色
                    if (!selectedItems.includes(el)) {
                        el.style.backgroundColor = style.itemBg;
                    }
                });
            });

            // 为选中的项目应用持续的悬停效果
            selectedItems.forEach(item => {
                item.style.backgroundColor = style.itemHoverBg;
                item.style.borderColor = style.headerColor;
            });
        }

        window.onload = applyRandomStyle;
    </script>
</body>